<template>
  <basic-container v-loading="saveLoading">
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-container>
          <el-aside width="100px">
            <el-button type="primary" @click="updateRealityLine" style="float: left;">保存</el-button>
          </el-aside>
        </el-container>
      </el-container>
    </div>
    <template>
      <div style="background:#fff;height: 50px;line-height: 50px;margin-bottom: 10px">
        <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5;margin-right:10px">
          <div class="block">
            车间：{{workshopName}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模型名称：{{realityLineName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模板： {{lineTplName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
            产线类型：{{lineType}}
          </div>
        </div>
      </div>
      <div class="form-designer">
        <el-container style="border: #e0e0e0 solid 1px;border-top:none">
          <el-main class="demo" >
          <avue-flow :height="800"
                       width="100%"
                       ref="flow"
                       :option="option"
                       v-model="flowForm">
              <template #header="{node}" >
                <el-tooltip class="item" effect="dark" :content="`工位(`+(node || {}).name+`)`" placement="top-start">
                    <span style="width:145px;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: bottom;text-overflow: ellipsis;">
                        工位({{(node || {}).name}})
                    </span>
                 </el-tooltip>
                 <el-tooltip class="item" effect="dark" content="删除工序" placement="top-start">
                      <i class="el-icon-delete"  style="cursor: pointer;float: right;line-height: 30px;margin-right: 2px" @click="deleteNode(node)"></i>
                 </el-tooltip>
              </template>
              <template slot-scope="{node}">
                <el-collapse :ref="node.id+`Ref`"  v-model="showActive[node.id]" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                  <el-collapse-item title="工序信息" name="1">
                    <el-descriptions  class="margin-top"  style="width: 100%;" title="" :column="1" size="small" border >
                        <el-descriptions-item  label="工序" :labelStyle="{'width': '50px'}"
                          v-model="`process_`+node.id"
                          v-for="(item, index) in workPositionProcessItem[node.id]">
                            <span style="float: left;margin-top: 7px">{{item.processName}}</span>
                            <el-tooltip class="item" effect="dark" content="设备人员信息" placement="top-start">
                              <el-button type="text"  @click="devicePersonInfo(node,item,index)" style="float: right;font-size: 16px"><i class="el-icon-tickets"></i></el-button>
                            </el-tooltip>
                        </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                 </el-collapse>
              </template>
            </avue-flow>

          </el-main>
        </el-container>
      </div>
    </template>


    <!--设备人员信息弹窗页面-->
    <el-dialog title=""
               :visible.sync="deviceDialogVisible"
               width="50%"
               height="600"
               lock-scroll
               v-dialogDrag
               append-to-body
               :close-on-click-modal="false"
               v-if="deviceDialogVisible"
               :fullscreen="deviceDialogFull">
      <el-backtop target=".el-card__body .el-dialog__wrapper .el-dialog" :right="15" :bottom="20" :visibility-height="1" />
      <el-backtop :bottom="60"></el-backtop>
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
              <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              设备人员信息
          </span>
          <div class="avue-crud__dialog__menu" style="cursor: pointer;margin-top: -2px;margin-right: 10px;" @click="deviceDialogFull? deviceDialogFull=false: deviceDialogFull=true">
              <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
      <!--工序菜单-->
      <div style="height:30vh;width: 90%;margin-left: auto;margin-right: auto">
        <div style="width: 20vh;float: left;margin-left: 20px">
          <el-steps :space="120" direction="vertical" status="process">
              <el-step :title="workPositionName">
                <template slot="icon">
                  工位
                </template>
              </el-step>
              <el-step :title="processInfo.workshopSection">
                <template slot="icon">
                  工段
                </template>
              </el-step>
              <el-step :title="processInfo.processName">
                <template slot="icon">
                  工序
                </template>
              </el-step>
          </el-steps>
        </div>
        <div style="width: 50vh;height:30vh;display: inline-block;margin-top: 10px;margin-bottom: 10px;float: right">
            <el-descriptions class="margin-top" title="设备人员添加" style="" :labelStyle="{width: '50px',fontSize: '14px',color: '#606266'}" :contentStyle="{width: '150px'}" :column="1" size="medium" border >
              <template slot="title">
                 <el-button type="primary" size="small" @click="addDevicePersonInfo">添加</el-button>
              </template>
              <el-descriptions-item label="设备">
                <el-select v-model="info.deviceSn" placeholder="请选择设备"  filterable clearable :filter-method="deviceFilterMethod">
                  <el-option
                    style="margin-bottom:15px"
                    v-for="item in deviceList"
                    @click.native="chooseDevice(item)"
                    v-show=" !deviceSnVal || sourceDeviceList.includes(item.deviceSn)"
                    :label="item.deviceName"
                    :value="item.deviceSn"
                    :key="item.deviceSn">
                    <span style="float: left;">{{ item.deviceName }}</span>
                    <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                    <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                    <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                  </el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="工具">
                <el-select v-model="info.toolSn" placeholder="请选择工具"  filterable clearable  :filter-method="toolFilterMethod">
                  <el-option
                    style="margin-bottom:15px"
                    v-for="item in toolList"
                    @click.native="chooseTool(item)"
                    v-show=" !toolSnVal || sourceToolList.includes(item.deviceSn)"
                    :label="item.deviceName"
                    :value="item.deviceSn"
                    :key="item.deviceSn">
                    <span style="float: left;">{{ item.deviceName }}</span>
                    <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                    <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                    <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                  </el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="夹具">
                <el-select v-model="info.clampSn" placeholder="请选择夹具"  filterable clearable  :filter-method="clampFilterMethod">
                  <el-option
                    style="margin-bottom:15px"
                    v-for="item in clampList"
                    @click.native="chooseClamp(item)"
                    v-show=" !clampSnVal || sourceClampList.includes(item.deviceSn)"
                    :label="item.deviceName"
                    :value="item.deviceSn"
                    :key="item.deviceSn">
                    <span style="float: left;">{{ item.deviceName }}</span>
                    <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                    <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                    <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                  </el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="员工">
                  <el-select v-model="info.personName" placeholder="请选择人员"  filterable clearable>
                    <el-option
                      v-for="item in personCredentialList"
                       @click.native="choosePerson(item)"
                      :label="item.jobNo"
                      :value="item.jobNo">
                    </el-option>
                  </el-select>
              </el-descriptions-item>
            </el-descriptions>
        </div>
      </div>
      <div class="el-dialog-height">
        <el-table :data="infoList"  border height="250" style="width: 100%; float: left;display: inline-block">
          <el-table-column prop="deviceName" label="设备" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.deviceSn" placeholder="请选择设备"  v-if="scope.row.edit"  filterable clearable :filter-method="deviceFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in deviceList"
                  v-show=" !deviceSnVal || sourceDeviceList.includes(item.deviceSn)"
                  @click.native="chooseRowDevice(item, scope.row)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.deviceName }}{{ scope.row.deviceSn }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="toolName"   label="工具" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.toolSn" placeholder="请选择工具"  v-if="scope.row.edit"  filterable clearable :filter-method="toolFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in toolList"
                  v-show=" !toolSnVal || sourceToolList.includes(item.deviceSn)"
                  @click.native="chooseRowTool(item, scope.row)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.toolName }}{{ scope.row.toolSn }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clampName"  label="夹具" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.clampSn" placeholder="请选择夹具"  v-if="scope.row.edit"  filterable clearable :filter-method="clampFilterMethod">
                <el-option
                  style="margin-bottom:15px"
                  v-for="item in clampList"
                  v-show=" !clampSnVal || sourceClampList.includes(item.deviceSn)"
                  @click.native="chooseRowClamp(item, scope.row)"
                  :label="item.deviceName"
                  :value="item.deviceSn"
                  :key="item.deviceSn">
                  <span style="float: left;">{{ item.deviceName }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceSn }}</span>
                  <span style="float: left;color: #5e80a6; font-size: 13px">{{ item.deviceStatusLabel }}</span>
                  <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.position }}</span>
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.clampName }}{{ scope.row.clampSn }}</span>
            </template>

          </el-table-column>
          <el-table-column prop="personName" label="员工" show-overflow-tooltip align="center" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.personName" placeholder="请选择人员"  v-if="scope.row.edit"  filterable clearable>
                <el-option
                  v-for="item in personCredentialList"
                  :label="item.jobNo"
                  :value="item.jobNo">
                </el-option>
              </el-select>
              <span v-else>{{ scope.row.personName }}</span>
            </template>

          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.edit">
                <el-button type="text" size="small" @click="saveRow(scope.$index, scope.row)">保存</el-button>
                <el-button type="text" size="small" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
              </div>
              <div v-else>
                <el-button type="text" size="small" @click="editRow(scope.$index, scope.row)">编辑</el-button>
                <el-button type="text" @click="delDevicePersonInfo(scope.row, scope.$index)" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

  </basic-container>
</template>

<script>
    import { getObj} from '@/api/pfoc/factorysettings' //获取当前工厂信息
    import { getDevice} from '@/api/hengdong/pfocinterface'//获取设备相关
    import { updateModelingLine,getLineModelingInfo } from '@/api/pfoc/realityproducelinemodeling' //产线建模修改与获取产线建模信息
    import { getPersonCredentialList } from '@/api/workorder/personcredentialmanage' //获取所有人员数据


    /**引入设备下拉框*/
    import deviceSelect from '@/views/pfoc/realityproductline/custom-select'

    export default {
        name: "edit-line-modeling",
        components: {
            //设备下拉框
            deviceSelect,
        },
        props:{
            lineId:{//产线ID
                type:String
            },
        },
        data() {
            return {
                formCollapse: [],
                count: 0,
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                flowForm:'',
                option: {
                    name: null,
                    nodeList: [],//工位节点集合
                    lineList: [],//工位各节点指向顺序集合
                },
                processInfo:{//工位信息
                    workshopSection:null,//工段
                    processName:null,//工位名称
                    processId:null,//工位ID
                },
                info:{
                    deviceSn:null,//设备SN
                    toolSn:null,//工具SN
                    clampSn:null,//夹具SN
                    personName:null,//员工
                    deviceName:null,//设备SN
                    toolName:null,//工具SN
                    clampName:null,//夹具SN
                },
                index:null,//用于标记打开的是第几个
                infoList:[],//存储设备人员信息
                workPositionProcessItem: {},//存储工位对应工位的二位数组
                personCredentialList:[],//人员资质数据集
                showActive:[],//属性展示model集合
                logList:[],//操作日志集合
                realityLineName:null,//产线名称
                deviceList:[],//设备集合
                deviceSnVal:'',//设备搜索项
                sourceDeviceList:[],//源设备集合
                clampList:[],//夹具集合
                clampSnVal:'',//夹具搜索项
                sourceClampList:[],//源夹具集合
                toolSnVal:'',//工具搜索项
                toolList:[],//工具集合
                sourceToolList:[],//源工具集合
                deviceClassList:[],//设备分类集合
                organizationId:null,//组织ID
                organizationName:null,//组织名称
                saveLoading:false,//保存时遮罩开关
                lineModelingDetailsDelIds:[],//存储需要删除的节点工位ID（即已有工位删除ID）
                zIndexStyle:"",
                mainData:{},//真实产线主数据
                subData:[],//真实产线详情数据
                lineTplId:null,//产线模板ID
                lineTplName:null,//产线模板名称
                workshopList:[],//车间数据集合
                workshopId:null,//车间ID
                workshopName:null,//车间名称
                lineType:null,//产线类型（手动线、自动线）
                deviceDialogVisible:false,//设备添加弹窗开关
                deviceDialogFull:false,//设备添加弹窗放大缩小
                workPositionName:null,//工位名称(用于工位添加)
                workPositionId:null,//工位ID(用于工位添加)
                nodeId:null,//工位节点ID(用于工位添加)
                lineTypeList:[//产线类型列表
                  {
                    value: '手动线',
                    label: '手动线'
                  }, {
                    value: '自动线',
                    label: '自动线'
                  }
                ],
              originalRows: {}, // 用于存储原始数据的备份
            };
        },

        created() {
            //获取当前工厂信息
            this.getFactoryInfo();
            //获取所有人员数据
            this.getPersonCredentialListData();
        },
        computed: {
            nodeList () {
                return this.option.nodeList
            }

        },
        mounted() {
            this.nodeCount = this.option.nodeList.length;//初始化节点下标
        },
        methods: {
            getLineModelingInfos(){
                this.formCollapse = []
                if(!this.validatenull(this.lineId)) {
                    this.saveLoading = true
                    getLineModelingInfo(this.lineId).then(response => {
                        this.$refs.flow.resetPlumb();
                        var data =response.data.data;
                        //主表数据
                        this.mainData= data.realityProduceLineModeling;//主数据
                        //子表数据
                        this.subData = data.realityProduceLineModelingDetailsList;//子表数据
                        //产线名模型称
                        this.realityLineName =this.mainData.realityLineName;
                        //产线模板ID
                        this.lineTplId =this.mainData.lineTplId;
                        //产线模板名称
                        this.lineTplName = this.mainData.lineTplName;
                        //车间ID
                        this.workshopId = this.mainData.workshopId;
                        //车间名称
                        this.workshopName = this.mainData.workshopName;
                        //产线类型
                        this.lineType = this.mainData.lineType;
                        //设置反显工位
                        this.option.nodeList = JSON.parse(this.mainData.processNodes);
                        //设置反显工位指向顺序
                        this.option.lineList =  JSON.parse(this.mainData.processNodeLine);
                        //初始化节点下标
                        var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
                        this.nodeCount = parseInt(n.split("node")[1])+1;

                        //从子表数据中根据nodeId字段将对应的workPositionProcessItem填入到页面的workPositionProcessItem二位数组中
                        for(var i=0;i<this.subData.length;i++){
                            var nodeId = this.subData[i].nodeId;
                            var item =JSON.parse(this.subData[i].workPositionProcessItem);
                            this.$set(this.workPositionProcessItem,nodeId, item);//添加工位集合
                        }
                        //重新初始化flow组件
                        this.$refs.flow.init();
                        this.saveLoading = false
                    }).catch(() => {
                        this.saveLoading = false
                    })
                }
            },
            /**获取工厂信息*/
            getFactoryInfo() {
                const factoryId=1;
                getObj(factoryId).then(response => {
                    this.organizationId = response.data.data.menuId;//组织ID
                    this.organizationName = response.data.data.organizationName;//组织名称
                    //获取工厂设备集合
                    this.getFactoryDeviceList();
                })
            },
            /**获取工厂设备集合*/
            getFactoryDeviceList(){
                var obj={
                    position:this.organizationName,//设置组织查询条件
                }
                getDevice(obj).then(response => {
                    this.deviceList = response.data.data;//设备集合
                    for(var i =0; i<this.deviceList.length;i++){
                       if(this.deviceList[i].deviceClass==='20'){//组织下工具夹具筛选
                            this.clampList.push(this.deviceList[i]);//夹具集合
                            this.toolList.push(this.deviceList[i]);//工具集合
                        }
                    }
                } )
            },
            //获取所有人员数据
            getPersonCredentialListData(){
                getPersonCredentialList().then(response => {
                    this.personCredentialList = response.data.data;
                })
            },
            /**删除工位*/
            deleteNode(node){
                var t = this;
                const id = node.id;
                this.$confirm("确定要删除工位" + node.name + "?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    closeOnClickModal: !1
                }).then((function() {
                    t.$refs.flow.deleteNode(id);
                    //新增数据删除
                    if(t.siftProcess(id)) {//判断当前工位是新增还是修改
                        var  deleteId = null
                        //修改数据删除
                        for (var n=0;n< t.subData.length;n++){
                            if(t.subData[n].nodeId === id){
                                deleteId = t.subData[n].id
                            }
                        }
                        if(!t.validatenull(deleteId)){
                            t.lineModelingDetailsDelIds.push(deleteId)
                        }
                    }
                    t.$delete(t.workPositionProcessItem, id);

                })).catch((function() {}));

            },
            /**区分新增工位、修改工位*/
            siftProcess(nodeId){
                var flg = false;//默认新增为false，修改为true
                //循环已添加的工位集合根据节点ID区分新增和修改工位
                for (var n=0;n< this.subData.length;n++){
                    if(this.subData[n].nodeId === nodeId){
                        flg=true;
                    }
                }
                return flg;
            },

            /**保存修改产线*/
            updateRealityLine(){
                if (this.validatenull(this.option.nodeList)) {
                    this.$message.warning("工位不能为空。")
                    return;
                }
                if(this.validatenull(this.lineType)){
                  this.$message.warning("请选择产线类型。")
                  return;
                }
                //组装需要提交的数据-实际产线主表数据组装
                var params = {};//主表参数集合
                params.id = this.lineId;//产线ID
                params.realityLineName = this.realityLineName;//产线名称
                params.lineTplId = this.lineTplId;//模板ID
                params.lineTplName = this.lineTplName;//模板名称
                params.lineType = this.lineType;//产线类型（手动线、自动线）
                params.workshopId = this.workshopId;//车间ID
                params.workshopName = this.workshopName;//车间名称
                params.processNodes = JSON.stringify(this.option.nodeList);//工位节点集合（其中mark字段为工位ID）
                params.processNodeLine = JSON.stringify(this.option.lineList);//工位各节点指向顺序集合

               //组装需要提交的数据-实际产线子表数据组装
                var addObj = [];//需要新增的工位集合
                var editObj = [];//需要修改的工位集合
                //循环工位节点集合
                for (var i = 0; i < this.option.nodeList.length; i++) {
                    var obj = new Object();//创建对象
                    var nodeId = this.option.nodeList[i].id;
                    var nodeObj = this.option.nodeList[i];

                    obj['workPositionId'] = nodeObj.mark;//取出工位ID加入对象
                    obj['workPositionName'] = nodeObj.name;//取出工位名称加入对象
                    obj['nodeId'] = nodeObj.id;
                    obj['lineId'] = this.lineId;//产线id

                    var workPositionProcessItem = this.workPositionProcessItem[nodeId];
                    if(this.validatenull(workPositionProcessItem)){
                      this.$message.warning("请为工位【"+nodeObj.name+"】配置工序。");
                      return;
                    }
                    obj['workPositionProcessItem'] = JSON.stringify(workPositionProcessItem);//取出工位配置的工序集合加入对象
                    var processNameStr="";//工序名字符串
                    var processIdStr="";//工序ID字符串
                    for (let j = 0; j < workPositionProcessItem.length; j++) {
                        processNameStr = processNameStr + workPositionProcessItem[j].processName + ",";
                        processIdStr = processIdStr + workPositionProcessItem[j].id + ",";
                    }
                    obj['processNameStr'] = processNameStr.substring(0,processNameStr.length-1);
                    obj['processIdStr'] = processIdStr.substring(0,processIdStr.length-1);

                    //最后加入提交数据数组
                    if (!this.siftProcess(nodeObj.id)) {//判断当前工位是新增还是修改
                        addObj.push(obj);
                    } else {//加入提交修改数据数组
                        for (var n = 0; n < this.subData.length; n++) {
                            if (this.subData[n].nodeId === nodeObj.id) {
                                obj['id'] = this.subData[n].id
                            }
                        }
                        editObj.push(obj);
                    }
                }
                var data = {
                    realityProduceLineModeling: params,
                    addLineModelingDetailsList: addObj,//编辑时新增工位配置集合
                    editLineModelingDetailsList: editObj,//编辑时修改工位配置集合
                    lineModelingDetailsDelIds: this.lineModelingDetailsDelIds//编辑时产线配置详情需要删除的ID集合
                }
                this.saveLoading = true;
                //提交
                updateModelingLine(data).then(response => {
                    this.$message.success("修改成功。")
                    //获取修改后的产线详情数据
                    this.subData = response.data.data;
                    this.$emit('closeEdit');//关闭修改页面
                    this.saveLoading = false
                }).catch(() => {
                    this.saveLoading = false
                });

            },
            //设备人员信息
            devicePersonInfo(node,processInfo,index){
                this.workPositionName=node.name;//工位名称(用于工序添加)
                this.workPositionId=node.mark;//工位ID(用于工序添加)
                this.nodeId=node.id;//工位节点ID(用于工序添加)
                this.processInfo.processName = processInfo.processName;//工序名称
                this.processInfo.processId = processInfo.id;//工序ID
                this.processInfo.workshopSection = processInfo.workshopSection;//工位所属工段
                this.index = index;
                this.infoList = this.workPositionProcessItem[node.id][index].info;
                this.originalRows = {};
                this.info={
                  deviceSn:null,//设备SN
                  toolSn:null,//工具SN
                  clampSn:null,//夹具SN
                  personName:null,//员工
                  deviceName:null,//设备SN
                  toolName:null,//工具SN
                  clampName:null,//夹具SN
                }
                this.deviceDialogVisible=true;
            },
            //设备选择
            chooseDevice(item){
              this.info.deviceSn = item.deviceSn;
              this.info.deviceName = item.deviceName;
            },
            //工具选择
            chooseTool(item){
              this.info.toolSn = item.deviceSn;
              this.info.toolName = item.deviceName;
            },
            //夹具选择
            chooseClamp(item){
              this.info.clampSn = item.deviceSn;
              this.info.clampName = item.deviceName;
            },
            //人员选择
            choosePerson(item){
              this.info.personName = item.jobNo;
            },
            //确认添加
            addDevicePersonInfo(){
              if(this.validatenull(this.info.deviceSn)&&this.validatenull(this.info.toolSn)&&this.validatenull(this.info.clampSn)&&this.validatenull(this.info.personName)){
                  this.$message.warning("请选择设备、工具、夹具、员工！");
                  return;
              }
              const newInfo = { ...this.info };//深拷贝
              this.infoList.push(newInfo);
              const newInfoList = [...this.infoList];
              this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
              this.info={
                    deviceSn:null,//设备SN
                    toolSn:null,//工具SN
                    clampSn:null,//夹具SN
                    personName:null,//员工
                    deviceName:null,//设备SN
                    toolName:null,//工具SN
                    clampName:null,//夹具SN
                }
            },
            //人员信息删除
            delDevicePersonInfo(row,index){
              this.infoList.splice(index,1);
              const newInfoList = [...this.infoList];
              this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
              },
            //鼠标移到置顶
            handleMouseEnter(nodeId) {
                //属性鼠标移到展开
                // this.$set(this.showActive, nodeId, ['1']);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
                this.zIndexStyle="1";

            },
            //鼠标移开取消置顶
            handleMouseLeave(nodeId) {
                //属性鼠标移开关闭
                // this.$set(this.showActive, nodeId, []);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="2";
                this.zIndexStyle="";

            },
            chooseRowDevice(item,row){
              row.deviceSn = item.deviceSn;
              row.deviceName = item.deviceName;
            },
            chooseRowTool(item,row){
              row.toolSn = item.deviceSn;
              row.toolName = item.deviceName;
            },
            chooseRowClamp(item,row){
              row.clampSn = item.deviceSn;
              row.clampName = item.deviceName;
            },
            editRow(index, row) {
              // 备份原始数据
              this.$set(this.originalRows, index, { ...row });
              // 动态添加 edit 属性
              this.$set(row, 'edit', true);
            },
            //设备人员信息修改保存
            saveRow(index, row) {
              this.infoList[index] = row;
              const newInfoList = [...this.infoList];
              this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
              this.$set(row, 'edit', false);
            },
            cancelEdit(index, row) {
              // 从备份对象中恢复原始数据
              Object.assign(row, this.originalRows[index]);
              this.infoList[index] = row;
              const newInfoList = [...this.infoList];
              this.$set(this.workPositionProcessItem[this.nodeId][this.index],'info',newInfoList);
              // 移除备份对象中的数据
              this.$delete(this.originalRows, index);
              // 取消编辑，恢复原始数据
              this.$set(row, 'edit', false);
            },
            //设备搜索
            deviceFilterMethod(query) {
              let arr = [];
              this.deviceSnVal = query;
              if (!this.validatenull(query)) {
                this.deviceList.forEach((item, i) => {
                  if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
                    arr.push(item.deviceSn);
                  }
                })
              } else {
                this.deviceList.forEach((item, i) => {
                  arr.push(item.deviceSn);
                })
              }
              this.sourceDeviceList = [...arr];
            },
            //工具搜索
            toolFilterMethod(query) {
              let arr = [];
              this.toolSnVal = query;
              if (!this.validatenull(query)) {
                this.toolList.forEach((item, i) => {
                  if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
                    arr.push(item.deviceSn);
                  }
                })
              } else {
                this.toolList.forEach((item, i) => {
                  arr.push(item.deviceSn);
                })
              }
              this.sourceToolList = [...arr];
            },
            //夹具搜索
            clampFilterMethod(query) {
              let arr = [];
              this.clampSnVal = query;
              if (!this.validatenull(query)) {
                this.clampList.forEach((item, i) => {
                  if (item.deviceName.includes(query) || item.deviceSn.includes(query)) {
                    arr.push(item.deviceSn);
                  }
                })
              } else {
                this.clampList.forEach((item, i) => {
                  arr.push(item.deviceSn);
                })
              }
              this.sourceClampList = [...arr];
            },
        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }

  /deep/.el-descriptions__header {
    width:100%!important;
  }


  /deep/ .el-dialog-height {
      height: 30vh;
      width: 90%;
      margin-top: 10px;
      overflow: auto;
      /* 隐藏默认的滚动条样式 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      text-align: center;
      margin-left: auto;
      margin-right: auto;
  }


  /deep/ .el-step__icon.is-text{
    color: #000;
    font-size: 12px;
    padding: 10px;
    border-color: #000;
    width: 50px;
    height: 50px;
  }
  /deep/.el-step__icon{
    width: 40px;
    height: 40px;
  }
  /deep/.el-step.is-horizontal .el-step__line{
    top:20px!important;
    border-color: #000;
  }
  /deep/.el-step.is-vertical .el-step__line {
    left: 23px!important;
  }
  /deep/.el-step.is-vertical .el-step__main{
    padding-left: 36px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 11px;
    color: #000;
    font-size: 12px;
  }
  /deep/.el-step.is-vertical .el-step__title{
     color: #000;
    font-size: 13px;
  }
  /deep/.el-step__line {
    position: absolute;
    border-color: inherit;
    background-color: #242526;
  }



  /*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#fff !important;
  }
  /deep/.el-card__body{
    padding: 0px!important;
  }
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
